{extend name="common/base" /}
{block name="style"}

<style type="text/css">
    .upload-img{
        position: relative;
        /*        width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                float: right;*/
        /*margin-right: 0.2rem;*/

    }
    .upload-img input{
        /*position: absolute;*/
        /*right: 0.2rem;*/
        /*top: 6%;*/
        /*width:100%;*/
        /*height: 2rem;*/
        opacity: 0;
    }
</style>
{/block}
{block name="body"}
<div class="soye-hui">
    <div class="wcsk-mains">
        <h2 class="wcsk-h2">完成车辆上刊后，请上传相关照片，提交审核</h2>
        <input type="hidden" name="oid" class="oid" value="{$oid}">
        <ul class="wcsk-nav">
            {volist name="position_list" id="vo"}
            <li onclick="position_{$vo.car_position_id}.click()" >
                <div class="nav-zi">{$vo.position_name}车身照</div>
                <div class="nav-tup upload-img">
                    <img src="__CDN__/html/img/tu1.jpg" class="tup-img img_{$vo.car_position_id}" id="img_{$vo.car_position_id}">
                    <input type="hidden" name="position_img_{$vo.car_position_id}" id="position_img_{$vo.car_position_id}" class="js-position-img-list">
                    <input type="file" name="position_{$vo.car_position_id}" id="position_{$vo.car_position_id}" class="position_img_file">
                    <p class="tp-ps">更换图片</p>
                </div>
            </li>
            {/volist}
            <!--            <li>
                            <div class="nav-zi">右侧车身照</div>
                            <div class="nav-tup">
                                <img src="__CDN__/html/img/tu1.jpg" class="tup-img">
                                <p class="tp-ps">更换图片</p>
                            </div>
                        </li> 
                        <li>
                            <div class="nav-zi">右侧车身照</div>
                            <div class="nav-tup2">
                                <img src="__CDN__/html/img/btn_tianjiatupian.png" class="tu-sc">
                                <p class="tu-zi">点击添加照片</p>
                            </div>
                        </li>                    -->
        </ul>
    </div>
    <div class="dw-aiy js-submit">提交审核</div>
</div>
{/block}
{block name="menu"}{/block}
{block name="script"}
<script type="text/javascript">
    $(".position_img_file").change(function () {
        var name = $(this).prevAll('img').attr('id');
        console.log(name);
        var img = $(this).prev().attr('id');
        console.log(img);
        readURL(this, name, img);
    });
    function readURL(input, name, img) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.' + name).attr('src', e.target.result);

            };
            reader.readAsDataURL(input.files[0]);

            var formData = new FormData();
            var img_file = input;

            var fileobj = img_file.files[0];
            formData.append("file", fileobj);

            $.ajax({
                url: "{:url('Pub/upload')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $('.' + name).show();
                    $('#' + img).val(data.data.url);
//                    $.post("{:url('My/setuserinfo')}", {avatar: data.data.url}, function (res) {
//                        if (res.code == '0') {
//                            mui.toast(res.msg);
//                        }
//                    }, 'json');
                },
                error: function () {
                    alert("上传失败！");
                }
            });


        }
    }

    $('.js-submit').on('click', function () {
        var id = "{$oid}";
        var img_list = [];
        $(".js-position-img-list").each(function () {
            img_list.push([$(this).attr('id'), $(this).val()]);
        });
        $.post("{:url('Task/sk')}", {oid: id, img_list: JSON.stringify(img_list)}, function (res) {
            if (res.code == '1') {
                location.href = res.url;
            } else {
                mui.toast(res.msg);
            }
        }, 'json');

    });
</script>
{/block}